<template>
  <div class="community">
    <nav-bar/>
    <com-menu  class="com_menu" :menu-width="menuWidth">
      <div class="item_div" ref="menu" @click="menu_click($event)"> 
        <div v-for="(item, index) in itemArr" :key="index">{{item}}</div>
      </div>
    </com-menu>
    <main-content></main-content>
    <div id="ball"><i class="iconfont icon-sousuo" style="font-size: 30px;"></i></div>
  </div>
</template>

<script>
import navBar from 'components/communityChildren/navBar'
import ComMenu from 'components/communityChildren/ComMenu'
import mainContent from 'components/communityChildren/mainContent'
export default {
  name:'community',
  components: {
    navBar,
    ComMenu,
    mainContent
  },
  data() {
    return {
      menuWidth: 822,
      num_index: 0,
      itemArr: ['推荐','围城随笔','旅行热点','露营初体验','酒店民宿','美食探店','亲子','小众','自驾','网红','逛展'],
      isTaggle: false,
      itemTag: null
    };
  },
  computed: {
    
  },
  watch: {},
  methods: {
    menu_click($event) {
      console.log($event.target);
      for(let name of this.itemArr) {
        if($event.target.innerText === name) {
          if(this.itemTag) {
            this.itemTag.style = null
            this.itemTag = null
          } 
          this.itemTag = $event.target
          $event.target.style.borderBottom = 'solid 3px #2fcfbb'
          $event.target.style.fontSize = '20px'
          break
        }
      }
      
    }
  },
  created() {
    
  },
  mounted() {
    this.menuWidth = this.$refs.menu.offsetWidth
  },
  beforeDestroy() {
    console.log(this.$route.meta.showTab);
  }
 
 }
</script>
<style scoped>
  @import url();
  .community{ 
    height: 100vh;
    width: 100vw;
    overflow: hidden;
    background-color: #f4f4f4;
  }

  .com_menu {
    width: 200%;
  }
  .item_div {
    display: flex;
    justify-content: space-around;
    height: 5vh;
    line-height: 5vh;
    margin-bottom: 2vh;
    color: black;
  }
  item_div :nth-child(1) {
    border-bottom: solid 3px #2fcfbb;
    font-size: 20px;
  }

  #ball {
    width: 50px;
    height: 50px;
    border-radius: 5vh;
    background-color: rgba(18, 187, 199,.5);
    position: absolute;
    left: 50%;
    top: 90%;
    transform: translate(-50%, -45%);
    text-align: center;
    color: white;line-height: 50px
  }
</style>